const path = require('path');
//vue-loader的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//自动在dist目录下生成index.html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//webpack
const webpack=require('webpack')
module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                    }
                  }
            },
            {
                test:/\.vue$/,
                use:['vue-loader']
            }
        ]
    },

    //解决路径、扩展名
    resolve:{
        // alias别名
        alias:{
            //正常使用vue的解决办法，加载vue时，选择vue.esm.js
            'vue$':'vue/dist/vue.esm.js'
        },
        //省略后缀名
        extensions:['.js','.css','.vue']
    },

    //插件
    plugins: [
        // vue-loader插件，才能打包vue文件
        new VueLoaderPlugin(),
        // webpack版权插件
        new webpack.BannerPlugin('最终版权归lyb所有'),
        //自动生成dist目录下的index.html，通过与webpack.config.js同级目录下的index.html为模板生成
        new HtmlWebpackPlugin({
            template:'index.html'
        })
    ],

        //热更新，不用每次build,开发时需要，但打包时不需要
    devServer: {
        contentBase: path.join(__dirname, "dist"),

        //inline实时监听
        inline:true,
        compress: true,
        port: 9000
      }
};